<template>
    <div class="mnLayout">
        <el-card class="Box">
            <div class="infoBox">
                <p>
                    <span>原始密码</span>
                    <span>
                        <el-input v-model="info.password" placeholder="请输入原始密码" maxlength="25"/>
                    </span>
                </p>
                <p>
                    <span>重置密码</span>
                    <span>
                        <el-input v-model="info.newPass" placeholder="请输入更新密码" maxlength="25"/>
                    </span>
                </p>
                <p>
                    <span>重置密码</span>
                    <span>
                        <el-input v-model="info.againPass" placeholder="在输入一次" maxlength="25"/>
                    </span>
                </p>
            </div>
            <div class="btnBox">
                <button  @click="update" :disabled="isShow">修改</button>
            </div>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onBeforeMount } from 'vue'
import { useUserInfoStore } from '@/store/userInfoState'
import { post } from '@/http/axios'
import { getCookies } from '@/utils/cookies'
import { remove } from '@/utils/cookies'
import { removeToken } from '@/utils/local'
import { useRouter } from 'vue-router'
import { resetRouter } from '@/router/public'
import { ElMessage } from 'element-plus'

type infoType = {
    password: string
    newPass: string
    againPass: string
}
let info = ref<infoType>({
    password:'',
    newPass:'',
    againPass:''
})
let id = ref<number>()
let status = ref<string>()
const store = useUserInfoStore()
const router = useRouter()
onBeforeMount(() => {
    id.value = store.user?.id?store.user.id:getCookies('id')
    status.value = store.user?.status?store.user.status:getCookies('state')
})
function update(){
    if (info.value.newPass === info.value.password) {
        ElMessage.error('原始密码和重置密码一致，请修改')
        return
    }
    if (info.value.newPass !== info.value.againPass) {
        ElMessage.error('两次输入的密码不一致，请检查')
        return
    }
    post('/'+ status.value +'/changeSelfPassword',{
        id: id.value,
        oldPassword: info.value.password,
        newPassword: info.value.newPass
    }).then(res => {
        console.log('修改密码',res);
        if (res.result) {
            ElMessage.success('修改成功')
            remove()
            removeToken()
            resetRouter(router)
            location.reload()
        }

    }).catch(err => {
        ElMessage.error('修改失败' + err)
    })
}
const isShow = computed(() => {
    let flag = false
    Object.keys(info.value).forEach(el => {
        if (!info.value[el]) flag = true
    })
    return flag
})
 </script>

<style lang="scss" scoped>
@media  screen and (min-width: 0) and (max-width: 1400px){
    .Box{
        width: 85%;
    }
}
@media  screen and (min-width: 1400px) and (max-width: 1600px){
    .Box{
        width: 80%;
    }
}
@media  screen and (min-width: 1600px) and (max-width: 100vw){
    .Box{
        width: 60%;
    }
}
.mnLayout{
    @include allBack;
    @include flexRowCenter;
    min-width: 1000px;
    padding: 80px ;
}
.Box{
    position: relative;
    @include flexColumnCenter;
}
.avatar{
    position: absolute;
    @include flexRowCenter;
    left: calc(50% - 50px);
    top: -70px;
    z-index: 9;
}
.changeAva{
    cursor: pointer;
    position: absolute;
    right: 3px;
    bottom: 0;
    background: #ecf0f1;
    border-radius: 50px;
}
.imgShadow{
    position: absolute;
    z-index: -1;
    left: -5px;
    top: -5px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: rebeccapurple;
    opacity: 0.3;
}
.infoBox{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 30px 20px;
    & p{
        width: calc(100% - 20px);
        text-align: left;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        position: relative;
    }
    & p span:nth-child(1){
        width: 130px;
        @include flexRowCenter;
        background: rgb(52, 152, 219,0.2);
        padding: 5px 0;
        box-sizing: border-box;
        border-radius: 8px;
    }
    & p input:nth-child(2){
        padding: 0 10px;
        box-sizing: border-box;
        outline: none;
        border: none;
        height: 40px;
        font-size: 16px;
        background: rgb(26, 188, 156,0.2);
        color: #222222;
        border-radius: 8px;
    }
    & p input:nth-child(2)::placeholder{
        color: #999999;
    }
    & p:nth-child(2):disabled{
        background: #b2bec3
    }
}
.btnBox{
    width: 100%;
    @include flexRowCenter;
    gap: 20px;
    & button{
        width: 200px;
        border: none;
        background: #3498db;
        color: white;
        outline: none;
    }
    & button:disabled {
        background: #d1cece;
    }
    & button:disabled:hover {
        background: #d1cece;
    }
    & button:hover{
        background: #2980b9;
    }
}
.afterI{
    cursor: pointer;
    border-radius: 5px;
    transition: all .5s;
    &:hover{
        background: #f5f6f7;
    }
}
.uploadBox{
    width: 100% !important;
    align-items: start !important;
    & span:nth-child(1){
        margin-top: 10px;
    }
    & span:nth-child(2){
        display: flex;
        justify-content: start;
        align-items: start;
        flex-wrap: wrap;
        gap: 20px;
        width: calc(100% - 200px);
        padding: 10px;
        box-sizing: border-box;
        border-radius: 8px;
        background: rgb(225, 112, 85,0.5);
    }
}
.descBox{
    width: 100% !important;
    align-items: start !important;
    & span:nth-child(1){
        margin-top: 10px;
    }
    & textarea:nth-child(2){
        outline: none;
        width: calc(100% - 200px);
        border: none;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 8px;
        background: rgb(225, 112, 85,0.5);
    }
}
:deep(.el-card) {
    overflow: visible;
    border-radius: 12px;
}
</style>